<template>
    <div class="articleList"  @scroll="scroll" ref="refScroll">
        <!-- <p>文章列表组件 {{channel}}--{{ Math.random() }}</p> -->

        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <van-cell v-for="item in list" :key="item.art_id.toString()" :title="item.title" @click="$router.push('/article/'+item.art_id.toString())">
                    <template #label>
                        <van-grid :column-num="item.cover.images.length">
                            <van-grid-item v-for="(item, index) in item.cover.images" :key="index" icon="photo-o" text="文字" >
                                <van-image lazy-load :src="item" />
                            </van-grid-item>
                        </van-grid>

                        <!-- 文字说明 -->
                        <div class="meta">
                            <span>{{item.aut_name}}</span>
                            <span>{{item.comm_count}}评论</span>
                            <span>{{item.pubdate | relative}}</span>
                            <span class="close" v-if="true">
                              <van-icon name="cross" @click.stop="$emit('show-more', item.art_id.toString())"></van-icon>
                            </span>
                        </div>
                    </template>
                </van-cell>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { reqGetArticles } from '@/api/article.js'
import { mapState } from 'vuex'
export default {
  name: 'articleList',
  props: ['channel'],
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      timestamp: null, // 时间戳
      scrollTop: 0
    }
  },
  computed: {
    ...mapState(['tokenInfo'])
  },
  created () {
    this.$eventBus.$on('del-article', obj => {
      // console.log(obj)
      const { articleId, channelId } = obj
      // console.log(articleId, channelId)
      if (channelId !== this.channel.id) {
        // console.log('与我无关', this.channel.id, channelId)
        return
      }
      // console.log('与我有关', channelId)
      this.list = this.list.filter(item => item.art_id.toString() !== articleId)
    })
  },
  activated () {
    console.log('被激活了')
    this.$refs.refScroll.scrollTop = this.scrollTop
  },
  methods: {
    async onLoad () {
      if (!this.timestamp) {
        this.timestamp = +new Date()
      }
      const res = await reqGetArticles(this.channel.id, this.timestamp)
      // console.log(res.data.data)
      this.timestamp = res.data.data.pre_timestamp
      const arr = res.data.data.results
      this.list = [...this.list, ...arr]
      this.loading = false
      if (arr.length === 0) {
        this.finished = true
      }
    },
    async onRefresh () {
      // 清空列表数据
      const res = await reqGetArticles(this.channel.id, +new Date())
      this.list = res.data.data.results
      this.timestamp = res.data.data.pre_timestamp
      // this.finished = false
      this.$toast.success('刷新成功！')
      this.refreshing = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      // this.loading = true
      this.onLoad()

      // console.log(getRelativeTime(+new Date()))
      // console.log(formatTime(+new Date()))
    },
    scroll (e) {
      console.log(e.target.scrollTop)
      this.scrollTop = e.target.scrollTop
    }
  }

}
</script>

<style lang='scss' scoped>
// .articleList {
//   .meta {
//     span{
//       margin-right: 10px;
//     }
//     .close{
//       float: right;
//       margin-top: 4px;
//     }
//   }
// }

.articleList{
  height: 100%;
  overflow: auto;
  ::v-deep .van-list {
    padding-bottom: 100px;
  }
  .meta {
    width: 100%;
    span {

      margin-right: 10px;
    }
    .right-icon {
      float: right;
      margin-top: 3px;
      margin-right: 3px;
    }
     .close{
      float: right;
      margin-top: 4px;
    }
  }
}

</style>
